<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>数据展示</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>

<body>
    <div id="app">
        <!-- 使用 v-for 展示 fruits 数组 -->
        <div v-for="(item, index) in fruits" :key="index">
            第{{index + 1}}种水果：{{item}}
        </div>
        <!-- 使用 v-for 展示 list 数组 -->
        <div v-for="(item, index) in list" :key="index">
            第{{index + 1}}项任务：{{item}}
        </div>
        <!-- 使用 p 标签替代 h1 展示循环内容 -->
        <p v-for="i in 100" :key="i">
            {{i - 1}}
        </p>
        <!-- 对象展示 -->
        <div v-for="(value, key) in student" :key="key">
            {{key}}:{{value}}
        </div>
        <!-- 展示 goods 数组 -->
        <div v-for="(good, index) in goods" :key="index">
            商品名称：{{good.title}}，价格：{{good.price}} 元
        </div>
		<table border="1">
		<tr v-for="row in table">
			<td v-for="col in row">{{col}}</td>
		</tr>
		</table>
    </div>
    <script>
        const { createApp } = Vue;
        createApp({
            data() {
                return {
                    fruits: ['苹果', '香蕉', '梨'],
                    // 定义 list 数组
                    list: ['吃饭', '睡觉', '学习'],
                    student: {
                        name: "张三",
                        className: "软技2306"
                    },
                    goods: [
                        {
                            title: '华为手机',
                            price: 1999
                        },
                        {
                            title: '小米手机',
                            price: 1899
                        },
                    ],
					table:[
						[1,2,4,1,0,0],
						[1,2,4,2,1,1],
						[1,1,5,1,0,0],
					]
                };
            }
        }).mount("#app");
    </script>
</body>

</html>